⚡ 30 秒速记

• 先看交付物：业务应用、组件库还是多格式工具包
• 应用重点看开发体验、资源处理和框架集成
• 库重点看产物格式、外部依赖和导出结构
• webpack 与 Rollup 都有优化能力，不能靠过时标签选型
• 用真实入口试构建，比较体积、耗时和维护成本

选构建工具要从项目需要什么产物出发，而不是给工具排一个通用名次。 业务应用通常更关心开发服务器、热更新和复杂资源接入，发布库则更关心模块格式、依赖是否外置以及包能否被下游优化。webpack 和 Rollup 都有丰富生态，也都在演进。拿项目里的真实依赖和入口试跑，比用“一个能拆包、一个不能”这样的固定印象更可靠。

版本校准： 旧文中的 webpack 4、JSONP 更新清单或 react-hot-loader 代码用于解释历史链路，不应直接复制到新项目。当前 webpack-dev-server 4+ 默认启用 HMR，严格 ESM 可使用 import.meta.webpackHot；生产环境不得携带 HMR runtime。以 webpack HMR 官方指南 和项目锁定版本为准。

Rollup 是一款 ES Modules 打包器。它也可以将项目中散落的细小模块打包为整块代码，从而使得这些划分的模块可以更好地运行在浏览器环境或者 Node.js 环境。

从作用上来看，Rollup 与 Webpack 非常类似。不过相比于 Webpack，Rollup 要小巧的多。因为 Webpack 在配合一些插件的使用下，几乎可以完成开发过程中绝大多数前端工程化的工作。而 Rollup 可以说仅仅是一个 ES Modules 打包器，没有更多其他的功能了。

例如，在 Webpack 中支持 HMR 这种对开发过程十分友好的功能，而在 Rollup 中就没有办法完全支持。

Rollup 诞生的目的并不是要与 Webpack 这样的工具全面竞争。它的初衷只是希望能够提供一个高效的 ES Modules 打包器，充分利用 ES Modules 的各项特性，构建出结构扁平，性能出众的类库。

至于它的其他特点和优势，我们需要上手过后才能深入了解。

快速上手

这里我准备了一个简单的示例，具体结构如下：

.
├── src
│   ├── index.js
│   ├── logger.js
│   └── messages.js
└── package.json

在这个示例的源代码中我准备了三个文件，并且使用 ES Modules 组织的代码模块化。部分代码如下：

// ./src/messages.js
export default {
  hi: 'Hey Guys, I am zce~'
}

// ./src/logger.js
export const log = msg => {
  console.log('---------- INFO ----------')
  console.log(msg)
  console.log('--------------------------')
}
export const error = msg => {
  console.error('---------- ERROR ----------')
  console.error(msg)
  console.error('---------------------------')
}

// ./src/index.js
import { log } from './logger'
import messages from './messages'
log(messages.hi)